<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<h:outputStylesheet>
	.autoCompleteWidth50 {
	    width:100% !important;
	}
	.col1{
		width:5%;
	}
	.col2{
		width:95%
	}
	</h:outputStylesheet>
	<f:view>
		<div align="center">
			<div style="width: 800px;" align="left">
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Autocomplete method (Filtro de lado del servidor)" />
					</f:facet>
					<h:form>
						<h:panelGrid columns="2">
							<h:outputText value="Estado: " />
							<rich:autocomplete value="#{autoCompleteBean.estado}"
								autocompleteMethod="#{autoCompleteBean.autocompleteMethod}" />
						</h:panelGrid>
					</h:form>
				</rich:panel>
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Autocomplete list (Filtro de lado del cliente)" />
					</f:facet>
					<script>
				   function customFilter(subString, value){				
				      if(subString.length>=1) {				
				         if(value.indexOf(subString)!=-1)				
				            return true;				
				      }else return false;				
				   };
					</script>
					<h:form>
						<h:panelGrid columns="2">
							<h:outputText value="Estado: " />
							<rich:autocomplete
								mode="client" 
								value="#{autoCompleteBean.estado}"
								autocompleteList="#{autoCompleteBean.estados}"
								clientFilterFunction="customFilter" />
						</h:panelGrid>
					</h:form>
				</rich:panel>
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Lista separada por , ó ;" />
					</f:facet>
					<h:form>
						<h:panelGrid columns="2" style="width:100%; text-align:right;"
							columnClasses="col1,col2">
							<h:outputText value="Estado: " />
							<rich:autocomplete value="#{autoCompleteBean.estado}"
								autocompleteMethod="#{autoCompleteBean.autocompleteMethod}"
								tokens=",;" style="width:100%" inputClass="autoCompleteWidth50" 
								/>
						</h:panelGrid>
					</h:form>
				</rich:panel>
			</div>
		</div>
	</f:view>
</h:body>
</html>